<template>
	<view class="uiwu">
		<view class="item uiwu-flex-space" @tap.stop='showModel=true'>
			<text>头像</text>
			<image :src="userInfo.avatar" mode="aspectFill"></image>
			<uiwu-icon style="flex: none;" size="20" type="arrowright" color="#999"></uiwu-icon>
		</view>
		<view class="item uiwu-flex-space" @tap.stop="showModelPopup">
			<text>昵称</text>
			<input type="text" :value="userInfo.nickname" placeholder="请输入" disabled>
			<uiwu-icon style="flex: none;" size="20" type="arrowright" color="#999"></uiwu-icon>
		</view>
		<view class="item uiwu-flex-space" @tap.stop="uiwu.openWindow('/pages/user/binding')">
			<text>绑定手机</text>
			<input type="text" :value="userInfo.phone" placeholder="绑定手机号码" disabled>
			<uiwu-icon style="flex: none;" size="20" type="arrowright" color="#999"></uiwu-icon>
		</view>
		<view class="item uiwu-flex-space" @tap.stop="uiwu.openWindow('/pages/user/logoff')">
			<text>注销账号</text>
			<input type="text" placeholder="注销后无法恢复，请谨慎操作" disabled>
			<uiwu-icon style="flex: none;" size="20" type="arrowright" color="#999"></uiwu-icon>
		</view>
		
		<uiwu-popup v-model="showModel">
			<view class="uiwu-coupons" @tap.stop>
				<view class="uiwu-coupons-header uiwu-flex-align">
					<view class="title">选择默认头像</view>
					<uiwu-icon type="closeempty" color="#FFF" size="24" @click="cancel"></uiwu-icon>
				</view>
				<view class="uiwu-coupons-box">
					<view class="avatar uiwu-flex-space">
						<view v-for="(item,index) in avatarList" :key="index" @tap.stop="avatarIndex = index" :class="avatarIndex == index ? 'active' : ''">
							<image :src="item.url" mode="aspectFill"></image>
							<image v-if="avatarIndex == index" class="gou" src="/static/dagou.png" mode="widthFix"></image>
						</view>
						<!-- <view @tap.stop="avatarIndex = 2" :class="avatarIndex == 2 ? 'active' : ''">
							<image src="/static/nanhai.png" mode="aspectFill"></image>
							<image v-if="avatarIndex == 2" class="gou" src="/static/dagou.png" mode="widthFix"></image>
						</view> -->
					</view>
					<uiwu-footer>
						<view class="uiwu-footer">
							<view @tap.stop="submitAvatar" class="uiwu-footer-box uiwu-flex-center">确认使用</view>
						</view>
					</uiwu-footer>
				</view>
			</view>
		</uiwu-popup>
	</view>
</template>

<script setup lang="ts">
	import { onLoad , onShow } from '@dcloudio/uni-app';
	import { ref , inject , toRef} from "vue";
	import { useStore } from 'vuex';
	import { useredit , userInfo as getUserInfo , systemAvatar } from "@/api/api";
	import { uiwu } from "@/config/config";
	const stores = useStore();
	const showModel = ref<boolean>(false)
	const avatarIndex = ref<string|number>(99999999)
	const store = inject<any>('store');
	const userInfo = toRef(store.state,'userInfo')
	const avatarList = ref([]);
	const cancel = () : void => {
		showModel.value = false
	}
	const submitAvatar = async () : Promise<any> => {
		if(avatarIndex.value === 99999999) return uiwu.toast('请选择头像');
		const result = await useredit({
			field:'avatar',
			value:avatarList.value[avatarIndex.value].url
		})
		if(!result) return
		cancel()
		uiwu.toast('更新头像成功')
		setUserInfo()
	}
	const showModelPopup = () :void =>{
		uni.showModal({
			title:'昵称修改',
			editable:true,
			placeholderText:'请输入新的昵称',
			success: async (res) => {
				if(!res.content) return uiwu.toast('名称不能为空')
				const result = await useredit({
					field:'nickname',
					value:res.content
				})
				if(!result) return
				uiwu.toast('修改成功')
				setUserInfo()
			}
		})
	}
	const increment = (data,type) => {
	    stores.commit(type, data);
	};
	const getsystemAvatar = async () => {
		const { data } = await systemAvatar();
		avatarList.value = data
	}
	const setUserInfo = async () => {
		const {data} = await getUserInfo();
		increment(data,'set_user')
	}
	onLoad(()=>{
		getsystemAvatar()
	})
	onShow(()=>{
		setUserInfo()
	})
</script>

<style lang="scss">
	page{
		background-color: #e6e6e6;
	}
	.uiwu{
		padding: 20rpx 0;
	}
	.item{
		background-color: #fff;
		padding: 40rpx 32rpx;
		border-bottom: 1rpx solid #e6e6e6;
		&:nth-child(1){
			text{
				flex: 1;
			}
		}
		&:last-child{
			border-bottom: 0;
		}
		text{
			font-size: 28rpx;
			font-weight: 500;
			color: #444444;
			// flex: 1;
			white-space: nowrap;
		}
		input{
			text-align: right;
			margin-right: 20rpx;
			font-size: 28rpx;
			flex: 1;
		}
		image{
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
	}
	.uiwu-coupons{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		&-header{
			width: 100%;
			height: 100rpx;
			background: #231815;
			border-radius: 32rpx 32rpx 0px 0px;
			padding: 0 20rpx;
			.title{
				font-size: 36rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				width: 100%;
				padding-left: 30rpx;
			}
		}
		&-box{
			background-color: #fff;
			padding: 72rpx 0 245rpx;
			.avatar{
				padding: 0 115rpx;
				image{
					width: 100%;
					height: 100%;
					&.gou{
						width: 40rpx;
						position: absolute;
						top: 0;
						right: 0;
					}
				}
				view{
					width: 160rpx;
					height: 160rpx;
					position: relative;
					border: 3rpx solid transparent;
					&.active{
						border: 3rpx solid #231815;
						border-radius: 50%;
					}
				}
			}
		}
	}
	.uiwu-footer{
		padding: 0 40rpx;
		width: 100%;
		&-box{
			width: 100%;
			height: 80rpx;
			background: #EF821E;
			border-radius: 40rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
</style>
